<template>
  <div class="add-linkman">
    <div class="group-form">
      <div class="addmemo">
        <h4>请选择群组</h4>
        <div class="input-search">
          <el-input
            placeholder="查找"
            v-model="adminName"
            class="input-with-select"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              class="search"
              @click="searchData"
            ></el-button>
          </el-input>
        </div>

        <el-button
          type="success"
          icon="el-icon-close"
          class="close-btn"
          size="medium"
          circle
          @click="closeUp"
        ></el-button>
      </div>
      <el-table
        :data="rowData"
        style="width: 100%"
        row-key="id"
        :row-style="{ height: '48px' }"
      >
        <el-table-column label="类型" min-width="60">
          <template slot-scope="scope">
            <span v-if="scope.row.type == 0">私有</span>
            <span v-else>公有</span>
          </template>
        </el-table-column>
        <el-table-column
          :prop="item.name"
          v-for="(item, index) in clumnData"
          :key="index"
          :label="item.lable"
          :min-width="item.width"
        ></el-table-column>
        <groupType></groupType>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="success"
              size="mini"
              icon="el-icon-plus"
              class="add-btn"
              @mousedown.native="addData(scope.row)"
              >添加</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pageFtoor :rowData="rowData" :countNum="countNum"></pageFtoor>
    </div>
  </div>
</template>
<script>
import pageFtoor from "../../components/components_wxq/pageFtoor.vue";
import groupType from "../../components/components_wxq/groupType.vue";

export default {
  name: "adsolutePage",
  components: {
    pageFtoor,
    groupType,
  },
  props:{
    clumnData:Array,
    rowData:Array
  },
  data() {
    return {
      countNum: 20,
      nowPage: 1,
      adminName: "",
    };
  },
  methods: {
    searchData(str) {
      console.log(str);
    },

    changePage(num) {
      console.log(num);
    },
    addData(obj) {
      this.$emit('addData',obj)
    },
    closeUp(){
      this.$emit('closePop')
    }
  },
  computed: {},
  watch: {},
};
</script>
<style lang="less" scoped>
.add-linkman {
  width: 100%;
}
.group-form {
  padding: 20px 30px;
  background-color: #ffffff;
  border: 1px solid #e5dfd3;

  border-radius: 8px 8px 0 0;
}
.addmemo {
  display: flex;
  width: 100%;
  // justify-content: space-between;
  h4 {
    min-width: 80px;
    width: 10%;
  }
  .input-search {
    width: 40%;
  }

  .close-btn {
    position: absolute;
    top: 20px;
    right: 3%;
    background-color: transparent;
    padding: 0;
    width: 36px;
    height: 36px;
    border: 1px solid #eee;
    font-size: 20px;
    color: #666;
  }
  add-btn {
    padding: 8px 10px;
  }
}
</style>
